<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>admin</title>
<link rel="stylesheet" type="text/css" href="/design/resource/js/extjs/resources/css/ext-all.css" >
<script src="/design/resource/js/extjs/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function(){
	
	Ext.QuickTips.init();
	
	Ext.define('fileInfo', {
	    extend: 'Ext.data.Model',
	    fields: [
	       {name: 'id'}
	       , {name: 'text'}
	       , {name: 'cls'}	      
	    ],
	    idProperty: 'id'
	});
		
	var dbStore = Ext.create('Ext.data.Store', {
		pageSize: 10
		, model: 'fileInfo'
		, remoteSort: true
		, id: 'dbStore'		
		, proxy: new Ext.data.HttpProxy({
			url: '/admin/json/grid1Data.do'
			, method: 'POST'
			, reader : {
				type: 'json'
				, root: 'results'
				, totalProperty: 'totalCount'
			}
		})		
	});

	var grid = Ext.create('Ext.grid.Panel', {
		title: 'FileInfo List'
		, store: dbStore
		, loadMask: true
		, columns: [
			{text: 'id', width: 150, dataIndex: 'id', sortable: true}
			, {text: 'text', flex: 1, dataIndex: 'text', sortable: true}
			, {text: 'cls', width:150, dataIndex: 'cls', sortable: true}
		]
		, renderTo: 'example-grid'
		, width: 540
		, height: 300
		, bbar: Ext.create('Ext.PagingToolbar', {
			store: dbStore
			, displayInfo: true
			, displayMessage: '{0} - {1} of {2}'
			, emptyMsg: 'empty rows'
		}) 
	});
	
	dbStore.loadPage(1);
	
	
	// Pie
	generateData = function(n, floor){
        var data = [],
            p = (Math.random() *  11) + 1,
            i;
            
        floor = (!floor && floor !== 0)? 20 : floor;
        
        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: Ext.Date.monthNames[i % 12],
                data1: Math.floor(Math.max((Math.random() * 100), floor)),
                data2: Math.floor(Math.max((Math.random() * 100), floor)),
                data3: Math.floor(Math.max((Math.random() * 100), floor)),
                data4: Math.floor(Math.max((Math.random() * 100), floor)),
                data5: Math.floor(Math.max((Math.random() * 100), floor)),
                data6: Math.floor(Math.max((Math.random() * 100), floor)),
                data7: Math.floor(Math.max((Math.random() * 100), floor)),
                data8: Math.floor(Math.max((Math.random() * 100), floor)),
                data9: Math.floor(Math.max((Math.random() * 100), floor))
            });
        }
        return data;
    };
    
    generateDataNegative = function(n, floor){
        var data = [],
            p = (Math.random() *  11) + 1,
            i;
            
        floor = (!floor && floor !== 0)? 20 : floor;
            
        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: Ext.Date.monthNames[i % 12],
                data1: Math.floor(((Math.random() - 0.5) * 100), floor),
                data2: Math.floor(((Math.random() - 0.5) * 100), floor),
                data3: Math.floor(((Math.random() - 0.5) * 100), floor),
                data4: Math.floor(((Math.random() - 0.5) * 100), floor),
                data5: Math.floor(((Math.random() - 0.5) * 100), floor),
                data6: Math.floor(((Math.random() - 0.5) * 100), floor),
                data7: Math.floor(((Math.random() - 0.5) * 100), floor),
                data8: Math.floor(((Math.random() - 0.5) * 100), floor),
                data9: Math.floor(((Math.random() - 0.5) * 100), floor)
            });
        }
        return data;
    };
    
	var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9'],
        data: generateData()
    });
	
	store.loadData(generateData(6, 20));
	
	var donut = false,
		chart = Ext.create('Ext.chart.Chart', {
			xtype: 'chart'
			, id: 'chartCmp'
			, animate: true
			, store: store
			, shadow: true
			, legend: {
				position: 'right'
			}
			, insetPadding: 60
			, theme: 'Base:gradients'
			, series: [{
				type: 'pie'
				, field: 'data1'
				, showInLegend: true
				, donut: donut
				, tips: {
					trackMouse: true
					, width: 140
					, height: 28
					, renderer: function(storeItem, item) {
						var total = 0;
						store.each(function(rec) {
							total += rec.get('data1');
						});
						this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
					}					
				}
				, highlight: {
					segment: {
						margin: 20
					}
				}
				, label: {
					field: 'name'
					, display: 'rotate'
					, contrast: true
					, font: '18px Arial'
				}
			}]
		});
	
	var panel1 = Ext.create('widget.panel', {
		width: 800
		, height: 600
		, title: 'Pie'
		, renderTo: Ext.getBody()
		, layout: 'fit'
		, tbar: [{
			text: '차트저장'
			, handler: function() {
				Ext.MessageBox.confirm('Confirm DownLoad', '차트를 이미지로 저장하시겠습니까?', function(choice){
					if(choice == 'yes') {
						chart.save({
							type: 'image/png'
						});
					}
				});
			}			
		}
		, {
			text: '갱신'
			, handler: function() {
				store.loadData(generateData(6,20));
			}
		}, {
			enableToggle: true
			, pressed: false
			, text: 'Donut'
			, toggleHandler: function(btn, pressed) {
				var chart = Ext.getCmp('chartCmp');
				chart.series.first().donut = pressed ? 35 : false;
				chart.refresh();
			}
		}]
		, items: chart
	});
});
	
</script>
</head>
<body>
	<div id="example-grid"></div>
</body>
</html>